import React, { useEffect, useState, useContext, useRef } from 'react'
import { connect } from 'react-redux'
import { Helmet } from 'react-helmet'
import { getUserInfo, getDanMuConfig } from 'api/base'
import { getRoomData } from '@/redux/async'
import Context from '@/config/context'
import VideoPlayer from '@/components/VideoPlayer/VideoPlayer'
import { formatCount } from 'utils/index'
import Tab, { sendMsg } from './components/Tab'
import './room.scss'
function Room(props) {
    const { dispatch, roomData, match } = props
    const { live = {} } = roomData

    const [anchor, setAnchor] = useState({ mId: 0, name: '', face: '' })
    const [roomId] = useState(match.params.roomId)
    const { picURL } = useContext(Context)
    const videoPlayerRef = useRef()
    const onlineRef = useRef()
    useEffect(() => {
        dispatch(getRoomData(roomId))
    }, [roomId])
    useEffect(() => {
        if (roomData.uId) {
            getUserInfo(roomData.uId).then((res) => {
                const up = {
                    mId: res.data.mid,
                    name: res.data.name,
                    face: res.data.face,
                    level: res.data.level,
                    sex: res.data.sex,
                    sign: res.data.sign,
                    following: res.data.status.following,
                    follower: res.data.status.follower
                }
                setAnchor(up)
            })
            getDanMuConfig(roomData.uId).then((res) => {
                console.log(`wss://${res.data.host}/sub`)
            })
        }
    }, [roomData])
    return (
        <div className="room">
            <Helmet>
                <title>{live.title}</title>
            </Helmet>
            <header className="head flex between middle">
                <h4 className="logo "></h4>
                <div className="crumb">
                    <a href="/live/areas">直播分类</a>
                    <span>&nbsp;&gt;&nbsp;</span>
                    <a
                        href={
                            `/live/list?pid=${roomData.parentAreaId}` +
                            `&pname=${roomData.parentAreaName}` +
                            `&areaid=${roomData.areaId}` +
                            `&areaname=${roomData.areaName}`
                        }
                    >
                        {roomData.areaName}
                    </a>
                </div>
            </header>
            <div className="main">
                <div className="live-container">
                    <VideoPlayer
                        video={{
                            aId: 0,
                            cId: 0,
                            title: live.title,
                            cover: picURL + '?pic=' + live.cover,
                            duration: 0,
                            url: live.playUrl
                        }}
                    />
                </div>
                <div className="up-container">
                    <div className="face">
                        <a href={'/space/' + roomData.uId}>
                            {anchor.face ? (
                                <img src={picURL + '?pic=' + anchor.face} alt={anchor.name} />
                            ) : null}
                        </a>
                    </div>
                    <div className="info-wrapper">
                        <p className="ancher">
                            主播：<span>{anchor.name}</span>
                        </p>
                        <div className="count">
                            <span className="online" ref={onlineRef}>
                                人气：{formatCount(live.onlineNum)}
                            </span>
                            <div className="fans">人气：{formatCount(anchor.follower)}</div>
                        </div>
                    </div>
                    <div className="tab-container">
                        <Tab description={roomData.description} />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default connect(
    function mapStateToProps(state) {
        return state
    },
    function mapDispatchToProps(dispatch) {
        return { dispatch }
    }
)(Room)
